<template>
    <div class="uploadExplainMaskBox">
        <p class="readBox">
            <i class="iconfont icon-dui" @click="readColorShow" :class="{'readColor':readColor}" ></i>
            我已经阅读并同意集设网的<span @click="explainShow" style="cursor:pointer">《上传说明》</span>
        </p>
        <div class="explainBox" v-show="explainOnoff">
            
            <div class="explainMask" ref="explainMask" id="explainMask">
                <div class="drag" @mousedown="move"></div>
                <p class="explainTitle">上传说明</p>
                <i class="explainClose iconfont icon-guanbi" @click="explainHide"></i>
                <ul>
                    <li>
                        <p class="explainListTitle">
                        <i class="iconfont icon-dian" @click="explainHide"></i>
                            上传要求
                        </p>
                        <p class="explainListContent">
                           您上传的素材必须保证原创性，上传非原创性素材可能会被封号。账户内收益将会用来奖励保持原创的作者，和网站发展。
                        </p>
                    </li>
                    <li>
                        <p class="explainListTitle">
                            <i class="iconfont icon-dian"></i>
                            审核说明
                        </p>
                        <div class="explainListContent">
                            <p>审核会在1-3个工作日内完成，审核结果会以站内消息告知；</p>    
                            <p>审核标准包括原创性，设计感，网站内容重复度等要求；</p>  
                        </div>
                    </li>
                    <li>
                        <p class="explainListTitle">
                            <i class="iconfont icon-dian"></i>
                            定价说明
                        </p>
                        <p class="explainListContent">
                            3D模型 ： 2元 &nbsp&nbsp/&nbsp&nbsp SU模型： 2元 &nbsp&nbsp/&nbsp&nbsp 施工图： 2元 &nbsp&nbsp/&nbsp&nbsp 概念方案： 20元
                        </p>
                    </li>
                    <li>
                        <p class="explainListTitle">
                            <i class="iconfont icon-dian"></i>
                            收益说明
                        </p>
                        <div class="explainListContent">
                            <p>通过的素材可获得50%下载收益。</p>    
                            <p>素材的收益期为永久。</p>  
                        </div>
                    </li>
                    <li>
                        <p class="explainListTitle">
                            <i class="iconfont icon-dian"></i>
                            提现说明
                        </p>
                        <div class="explainListContent">
                            <p>您可以在个人中心-收益记录处申请提现；</p>    
                            <p>每次提现金额需大于100元；</p>  
                        </div>
                    </li>
                    <li>
                        <p class="explainListTitle">
                            <i class="iconfont icon-dian"></i>
                            版权说明
                        </p>
                        <p class="explainListContent">
                            本站倡导共享精神推动设计行业发展，鼓励作者将素材二次增值，不排斥作者在多渠道进行作品售卖，作者上传后仍享有版权，本站享有售卖权和使用权。若作者在使用本站过程中和其他网站条款冲突时，须由作者自行解决。
                        </p>
                    </li>
                    <li>
                        <p class="explainListTitle">
                            <i class="iconfont icon-dian"></i>
                            其他
                        </p>
                        <p class="explainListContent">
                            本说明用于介绍上传素材要求，审核说明，定价和收益说明，提现说明，版权说明，仅用于约束网站上传素材行为，如果您不同意此规定，您可以继续选择其他服务。但仍需遵循网站的使用协议。
                        </p>
                    </li>
                </ul>
            </div>
            
        </div>
    </div>
    
</template>
<script>
export default {
    name : "explain",
    props:["readColor"],
    data(){
        return {
            explainOnoff : false,//说明的开关
        }
    },
    mounted () {
        this.maskPosition()
    },
    methods:{
        readColorShow(){
            this.$emit("readColorFn")
        },
        maskPosition(){//遮罩位置
            this.$refs.explainMask.style.top=(document.documentElement.clientHeight - 735)/2+"px";
            this.$refs.explainMask.style.left = (document.documentElement.clientWidth - 1077)/2+"px";
        },
        explainShow(){ //说明显示
            this.maskPosition();
            this.explainOnoff = true;
        },
        explainHide(){ //说明隐藏
            this.explainOnoff = false;
        },
        move(e){//弹出框拖拽
	      let odiv = e.target.parentNode;    //获取目标元素
	       
	      //算出鼠标相对元素的位置
	      let disX = e.clientX - odiv.offsetLeft;
	      let disY = e.clientY - odiv.offsetTop;
	      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
	        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
	        let left = e.clientX - disX;  
	        let top = e.clientY - disY;
	         
	        //绑定元素位置到positionX和positionY上面
	        this.positionX = top;
	        this.positionY = left;
	         
	        //移动当前元素
	        odiv.style.left = left + 'px';
	        odiv.style.top = top + 'px';
	      };
	      document.onmouseup = (e) => {
	        document.onmousemove = null;
	        document.onmouseup = null;
	      };
	    },
    }
}
</script>
<style>
    .uploadExplainMaskBox .explainBox{
        position: fixed;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.45);
        z-index:99;
    }
    .uploadExplainMaskBox .explainBox .explainMask{
        position: absolute;
        top: 50px;
        left: 100px;
        width: 1077px;
        height: 735px;
        background-color: #fff;
        padding: 26px 106px 0 65px;
    }
    .uploadExplainMaskBox .explainMask li{
        margin-bottom: 5px;
    }
    .uploadExplainMaskBox .explainTitle{
        font-size: 20px;
        line-height: 44px;
        color: #ea514b;
        font-weight: bold;
    }
    .uploadExplainMaskBox .explainListTitle{
        font-size: 16px;
        line-height: 36px;
        color: #333333;
    }
    .uploadExplainMaskBox .explainListContent{
        font-size: 14px;
        line-height: 28px;
        padding-left: 20px;
    }
    .uploadExplainMaskBox .explainClose{
        position: absolute;
        top: 20px;
        right: 20px;
        width: 30px;
        height: 30px;
    }
    .uploadExplainMaskBox .explainClose:hover{
        color: #ea514b;
    }
    .drag{
    position: absolute;
    width: 100%;
    height: 20px;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index:99;
}
</style>
